<template>
  <div>
    <el-button  @click="showDialog('insert')" type="primary">新增</el-button>
    <el-table :data="recordList" stripe border height="700px" class="user-table" style="width: 100%;" :header-cell-style="getRowClass">
      <el-table-column fixed type="index" label="*" sortable width="40"></el-table-column>
      <el-table-column prop="name" label="姓名"  sortable min-width="110" align="cover"></el-table-column>
      <el-table-column prop="content" label="内容"  sortable min-width="110" align="cover"></el-table-column>
      <el-table-column prop="result" label="结果"  sortable min-width="110" align="cover">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.result===1">合格</el-tag>
          <el-tag type="warning" v-else-if="scope.row.result===0">不合格</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="creatorName" label="创建人"  sortable width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" sortable width="150"></el-table-column>
      <el-table-column   label="操作" sortable width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showDialog('update',scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialog.title" width="800px" class="bodyNopaddingTop" :visible.sync="dialog.isShow" :close-on-click-modal="false" v-dialogDrag>
      <el-form label-position="right" label-width="110px" :model="dialog.formData">
        <el-form-item label="姓名">
          <el-input v-model="dialog.formData.name"  class="width220"></el-input>
        </el-form-item>
        <el-form-item label="结果">
          <el-select v-model="dialog.formData.result" placeholder="请选择" class="width220">
            <el-option label="合格" :value="1"></el-option>
            <el-option label="不合格" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" class="form-item-block">
          <div class="vueEditorBox">
            <VueUeditorWrap v-model="dialog.formData.content" :config="config"></VueUeditorWrap>
          </div>
        </el-form-item>
        <el-form-item label="创建人" v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.creatorName" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间" v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.createTime" disabled></el-input>
        </el-form-item>
        <el-form-item class="form-item-block text-center">
          <el-button @click="submitRecord()" type="primary">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>
<script>
import humanResourcesApi from '@/axios/humanResourcesApi.js'
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  components:{
    VueUeditorWrap
  },
  props:{
    hid:{
      type:[String,Number],
      required:true
    },
    recordType:{
      type:String,
      required:true
    }
  },
  data(){
    return {
      recordList:[],
      dialog:{
        title:'',
        isShow:false,
        type:'',
        formData:{}
      },
      config: {
        autoHeightEnabled: false,
        initialFrameHeight: 500,
        initialFrameWidth: '100%',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        autoFloatEnabled: true,　　//是否工具栏可浮动
        initialContent:'请输入内容',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
        autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
        BaseUrl: '',
        serverUrl:  "http://192.168.0.93:8889/mh/ueditor/config",
        UEDITOR_HOME_URL: 'static/ueditor/'
      },
    }
  },
  mounted(){

  },
  methods:{
    getTableList(){
      let self = this;
      hrApi.getHrRecordList(self.hid,self.recordType).then(res=>{
        self.recordList = res.content;
      })
    },
    showDialog(type,row){
      let self = this;
      self.dialog.isShow = true;
      self.dialog.type = type;
      switch(self.recordType){
        case "1":
          self.dialog.title = `${type==='insert'?'新增':'修改'}面试`
          break;
        case "2":
          self.dialog.title = `${type==='insert'?'新增':'修改'}录取通知`
          break;
        case "3":
          self.dialog.title = `${type==='insert'?'新增':'修改'}岗前培训与结果`
          break;
        case "4":
          self.dialog.title = `${type==='insert'?'新增':'修改'}试用期评价`
          break;
      }
      self.dialog.formData= type==="insert"?{}:JSON.parse(JSON.stringify(row));
    },
    submitRecord(){
      let self = this;
      let postData =self.dialog.type==="insert"?{
          hid:self.hid,
          type:self.recordType,
          name:self.dialog.formData.name,
          content:self.dialog.formData.content,
          result:self.dialog.formData.result
      }:self.dialog.formData
      hrApi.insertUpdateRecord(self.dialog.type,postData).then(res=>{
        self.$message.success(`${self.dialog.title}成功`);
        self.dialog.isShow = false;
        self.getTableList();
      })
    }
  }
}
</script>
<style scoped>

</style>
